<template>
  <view class="shopInfo" :style="[outModuleCss]">
    <view :style="[moduleBgCss]" class="module-bg"></view>
    <view class="address-label">
      <view class="address-info">
        <view class="address" :style="[mainColor]">{{ address }}</view>
        <i class="iconfont icon-arrow-right"></i>
      </view>
      <view class="local-info" @click="location">
        <span>当前位置</span>
        <i class="iconfont icon-dangqianweizhi"></i>
      </view>
    </view>
    <view class="split-line" :style="[lineColor]"></view>
    <view class="time-label" @click="handleTimePopup">
      <view class="time-select">
        <view class="start-time">
          <p class="time-title" :style="[mainColor]">入住</p>
          <p class="time-info">
            <span :style="[mainColor]">{{
              startTime ? startTime.month + "月" + startTime.day + "日" : ""
            }}</span>
            <span :style="[subColor]">{{
              startTime
                ? startTime.day_text
                  ? startTime.day_text
                  : weekData[startTime.week]
                : ""
            }}</span>
          </p>
        </view>
        <view class="split-time"></view>
        <view class="end-time">
          <p class="time-title" :style="[mainColor]">离店</p>
          <p class="time-info">
            <span :style="[mainColor]">{{
              endTime ? endTime.month + "月" + endTime.day + "日" : ""
            }}</span>
            <span :style="[subColor]">{{
              endTime
                ? endTime.day_text
                  ? endTime.day_text
                  : weekData[endTime.week]
                : ""
            }}</span>
          </p>
        </view>
      </view>
      <view class="total-time" :style="[mainColor]">共{{ totalDays }}晚</view>
    </view>
    <view class="split-line" :style="[lineColor]"></view>
    <view class="search-label">
      <u-input
        v-model="searchForm.keyword"
        placeholder="搜索酒店/地名/关键字"
        :custom-style="{ width: '89vw', display: 'block' }"
        clearable
      />
    </view>
    <view class="split-line" :style="[lineColor]"></view>
    <view class="foot-label">
      <view class="search-btn" @click="gotoSearch">搜索酒店</view>
    </view>
    <!-- 时间选择器 -->
    <timePopup ref="timePopup" @timeConfirm="timeConfirm"></timePopup>
  </view>
</template>

<script>
import { diyMixin } from "../mixins/diy";
import timePopup from "@/components/popups/timePopup.vue";
export default {
  name: "shopInfo",
  props: {
    propsData: {
      type: Object,
      default: {}
    },
    locaton: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  mixins: [diyMixin],
  components: {
    timePopup
  },
  data() {
    return {
      address: "请选择位置",
      searchForm: {
        keyword: ""
      },
      startTime: null,
      endTime: null,
      totalDays: 0,
      weekData: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      city: "",
      longitude: "",
      latitude: ""
    };
  },
  watch: {
    locaton: {
      handler(val) {
        this.longitude = val.longitude;
        this.latitude = val.latitude;
        this.getLocationInfo();
      },
      deep: true
    }
  },
  computed: {
    mainColor() {
      return { color: this.propsData.params.mainColor };
    },
    subColor() {
      return { color: this.propsData.params.subColor };
    },
    lineColor() {
      return { backgroundColor: this.propsData.params.lineColor };
    }
  },
  mounted() {
    this.$refs.timePopup.setDefaultTime();
    this.startTime = this.$refs.timePopup.startTime;
    this.endTime = this.$refs.timePopup.endTime;
    this.totalDays = 1;
  },
  methods: {
    // 点击导航按钮
    navigation(e) {
      if (e.latitude && e.latitude != "" && e.longitude && e.longitude != "") {
        uni.openLocation({
          latitude: parseFloat(e.latitude),
          longitude: parseFloat(e.longitude),
          name: e.name,
          address: e.address
        });
      }
    },
    // 定位
    async location() {
      const apiRes = await this.$store.dispatch("getLocation");
      if (apiRes.longitude) {
        uni.chooseLocation({
          success: (res) => {
            if (res.errMsg == "chooseLocation:ok") {
              this.longitude = res.longitude;
              this.latitude = res.latitude;
              this.getLocationInfo();
            }
          }
        });
      }
    },
    async getLocation() {
      const res = await this.$store.dispatch("getLocation");
      if (res) {
        let { longitude, latitude } = res;
        this.longitude = longitude;
        this.latitude = latitude;
      }
      this.getLocationInfo();
    },
    getLocationInfo() {
      this.$allrequest.diyNew
        .getLocationInfo({ longitude: this.longitude, latitude: this.latitude })
        .then((res) => {
          if (!res.code) {
            this.address =
              res.data.province +
              res.data.city +
              res.data.district +
              res.data.street_number;
            this.city = res.data.city;
          }
        });
    },
    handleTimePopup() {
      this.$refs.timePopup.showPopup();
    },
    timeConfirm(e) {
      this.$refs.timePopup.hidePopup();
      this.startTime = e.start;
      this.endTime = e.end;
      this.totalDays = e.total;
    },
    gotoSearch() {
      let obj = {
        start: this.startTime,
        end: this.endTime,
        keyword: this.searchForm.keyword,
        longitude: this.longitude,
        latitude: this.latitude,
        city: this.city.replace("市", "")
      };
      this.$utils.toUrl(
        `/other/search/searchPage?params=${JSON.stringify(obj)}`
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.shopInfo {
  width: 100%;
  position: relative;
  .module-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
  .address-label {
    width: 100%;
    height: 108rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24rpx;
    .address-info {
      flex: 1;
      display: flex;
      align-items: center;
      .address {
        max-width: 70vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 34rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #262626;
      }
      .iconfont {
        color: #cdcdcd;
        font-size: 22rpx;
      }
    }
    .local-info {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      span {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #f0250e;
      }
      .iconfont {
        color: #f0250e;
        font-size: 38rpx;
      }
    }
  }
  .split-line {
    width: 93.6%;
    height: 1px;
    background-color: #f8f8f8;
    margin: 0 auto;
  }
  .time-label {
    width: 100%;
    height: 146rpx;
    padding: 30rpx 24rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .time-select {
      display: flex;
      align-items: center;
      .start-time,
      .end-time {
        width: 200rpx;
      }
      .split-time {
        width: 32rpx;
        height: 4rpx;
        background: #f2f2f2;
        margin: 0 32rpx;
      }
      .time-title {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #262626;
        margin-bottom: 4rpx;
      }
      .time-info {
        display: flex;
        align-items: baseline;
        margin-bottom: 0;
        span:nth-child(1) {
          font-size: 34rpx;
          font-family: PingFang SC;
          font-weight: 600;
          color: #262626;
          margin-right: 1px;
        }
        span:nth-child(2) {
          font-size: 22rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #8c8c8c;
        }
      }
    }
  }
  .search-label {
    width: 100%;
    height: 100rpx;
    display: flex;
    align-items: center;
    padding: 0 24rpx;
  }
  .foot-label {
    width: 100%;
    padding: 30rpx 0;
    .search-btn {
      width: 93.6%;
      height: 80rpx;
      background: #fa2c1b;
      border-radius: 40rpx;
      text-align: center;
      line-height: 80rpx;
      margin: 0 auto;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 600;
      color: #ffffff;
    }
  }
}
</style>
